<template>
    <h1>个人简历练习</h1>
    <table border="1" align="center">
        <tr>
            <td>照片</td>
            <td>
                <img :src="person.imgUrl" width="150px">
            </td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>{{person.name}}</td>
        </tr>
        <tr>
            <td>年龄</td>
            <td>{{person.age}}</td>
        </tr>
        <tr>
            <td>好友</td>
            <td>
                <ul v-for="name in person.friends">
                    <li>{{name}}</li>
                </ul>
            </td>
        </tr>
    </table>
    <button @click="add"> 点我添加</button>
</template>

<script setup>


    import {ref} from "vue";

    const person = ref({name:'',age:'',imgUrl:'',friends:[]});

    const add = () => {
        person.value = {
            name:'貂蝉',
            age:18,
            imgUrl:'mn1.jpg',
            friends:['王昭君','杨玉环','西施']
        }
    }
</script>

<style scoped>

</style>